<template>
  <div class="w_h_100">
    <div class="box">
      <div class="inlet">系统管理 > <span class="size">合作机构管理</span></div>
      <myform :fields="fields" :model="values" class="m_t_10" :options="options">
        <template v-slot:button>
          <el-button @click="resetting">重置</el-button>
          <el-button type="primary" :icon="Search" @click="searchFor">搜索</el-button>
        </template>
      </myform>
    </div>
    <div class="mytable m_t_10 ">
      <div class="d_f j_c_s_b a_i_c">
        <h4>合作机构明细列表</h4>
        <el-button type="primary" :icon="Plus" @click="addInstitution" v-hasPerm="'addInstitution'">新建机构</el-button>
      </div>
      <mytable :fields="tableFields" width="200" ref="tableRef" :values="values" api="cooperativeAgencyListByPage"
        class="m_t_10" :isSelection="false">
        <template v-slot:status="{ row }">
          <span>{{ row.status == 0 ? '未合作' : '已合作' }}</span>
        </template>
        <template v-slot:branchNum="{ row }">
          <span class="size" @click="bank(row)">{{ row.branchNum }}</span>
        </template>
        <template v-slot:count="{ row }">
          <span class="size" @click="limit(row)">{{ row.count }}</span>
        </template>
        <template v-slot:operation="{ row }">
          <div class="d_f j_c_s_b">
            <span class="edit" @click="lookLog(row)">查看日志</span>
            <!-- <span class="edit" @click="productCopy(row)">查看详情</span> -->
            <span class="edit" @click="edit(row)" v-hasPerm="'editInstitution'">编辑</span>
            <span class="error" @click="deleteOut(row)" v-hasPerm="'deleteInstitution'">删除</span>
          </div>
        </template>
      </mytable>
    </div>
    <el-dialog v-model="bankShow" :title="bankTitle" width="700">
      <mytable :fields="bankFields" ref="bankTable" :values="bankVal" :handle="false" api="agency_branchPageBy" class="m_t_16"
        :isSelection="false">
      </mytable>
    </el-dialog>
    <el-dialog v-model="limitShow" title="合作业务及额度列表" width="1000">
      <mytable :fields="limitFields" :ergodicData="ergodicData" ref="limitTable" :values="bankVal" :handle="false" api="agencyProjectPageBy" class="m_t_16"
        :isSelection="false">
      </mytable>
    </el-dialog>
    <log :values="logValues" @logHandleClose="logHandleClose" ref="logRef"></log>
  </div>
</template>

<script lang='ts'>
import { defineComponent, reactive, toRefs, onBeforeMount, ref } from 'vue'
import { copy,momentTime } from '../../../utils/date'
import { Search, Plus } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { institutionType } from '../../../type/system'
import { productListAll, cooperativeAgencyDel } from '../../../api/system/institution'
import log from '../../../components/dialog/log.vue'
import { ElMessageBox } from 'element-plus'
import { Message } from '../../../utils/resetMessage'
const values = {
  productId: '',
  name: '',
}
export default defineComponent({
  name: '',
  components: {
    log
  },
  setup() {
    const data: institutionType = reactive({
      fields: [
        {
          label: "机构名称",
          prop: 'name',
          placeholder: '请输入机构名称',
          type: 'input',
          labelWidth: '70px'
        },
        {
          label: "合作产品",
          prop: 'productId',
          placeholder: '请选择合作产品',
          type: 'select',
          bindLabel: 'name',
          bindValue: 'id',
        },
        {
          prop: 'button'
        }
      ],
      values: copy(values),
      options: {
        productId: [],
      },
      tableFields: [
        {
          prop: "name",
          label: '名称',
          width: '150px'
        },
        {
          prop: "shortName",
          label: '简称',
          width: '150px'
        },
        {
          prop: "pname",
          label: '合作业务',
          width: '300px'
        },
        {
          prop: "status",
          label: '合作状态',
        },
        {
          prop: "branchNum",
          label: '分支机构数量',
          width: '150px'
        },
        {
          prop: "count",
          label: '总额度（元）',
          width: '150px'
        },
        {
          prop: "createdName",
          label: '创建人',
        },
        {
          prop: "createdTime",
          label: '创建时间',
          width: '200px'
        },
      ],
      bankShow: false,
      bankTitle: '',
      bankFields: [
        {
          prop: 'name',
          label: '名称',
        }
      ],
      limitShow: false,
      limitFields: [
        {
          prop: 'name',
          label: '业务名称',
           width: '150px'
        },
        {
          prop: 'amountLimit',
          label: '合作额度（元）',
          width: '140px'
        },
        {
          prop: 'spendingLimit',
          label: '已使用额度（元）',
          width: '140px'
        },
        {
          prop: 'balanceLimit',
          label: '剩余额度（元）',
          width: '140px'
        },
        {
          prop: 'lockMoney',
          label: '锁定额度（元）',
          width: '140px'
        },
        {
          prop: 'finishDate',
          label: '合作期限',
          width: '120px'
        },
      ],
      logValues: {
        bizId: '',
        category: '2'
      },
      bankVal:{
        id:'',
      },
      
    })
    const tableRef = ref()
    const router = useRouter()
    const bankTable=ref()
    const limitTable=ref()
    const logRef=ref()
    onBeforeMount(() => {
      methods.getData()
    })
    const methods = {
      getData() {
        productListAll({}).then((res: any) => {
          data.options.productId = res
        })
      },
      //表格数据重置
      resetting() {
        data.values = copy(values)
        tableRef.value.resettingTable(data.values)
      },
      //列表根据筛选条件搜索
      searchFor() {
        tableRef.value.handleCurrentChange(1)
      },
      //新建机构跳转
      addInstitution() {
        router.push('/system/institution/add')
      },
      //查看日志
      lookLog(row: any) {
        data.logValues.bizId = row.id
        logRef.value.getData()
      },
      //关闭日志弹窗并清除业务id
      logHandleClose() {
        data.logValues.bizId = ''
      },
      //删除合作机构
      deleteOut(row: any) {
        let val = `确认删除”${row.name}“`
        ElMessageBox.confirm(
          val,
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error',
          }
        )
          .then(() => {
            cooperativeAgencyDel({ id: row.id }).then(() => {
              Message({ type: 'success', message: '删除成功' })
              tableRef.value.handleCurrentChange(1)//添加表格之后重新获取表格
            })
          })
      },
      //编辑当前合作机构
      edit(row: any) {
        router.push({ path: '/system/institution/edit', query: { id: row.id } })
      },
      //查看银行机构
      bank(row: any) {
        data.bankTitle=`${row.name} 支行列表（${row.branchNum}）家`
        data.bankVal.id=row.id
        data.bankShow = true
        if(bankTable.value){
          bankTable.value.handleCurrentChange(1)
        }
      },
      //查看当前机构总额度
      limit(row: any) {
        data.bankVal.id=row.id
        data.limitShow = true
        if(limitTable.value){
          limitTable.value.handleCurrentChange(1)
        }
      },
      ergodicData(list:any){
       list.map((item:any)=>{
        item.finishDate=momentTime('YYYY-MM-DD',item.finishDate)
      })
      return list
      }
    }
    return {
      ...toRefs(data),
      Search, Plus,
      ...methods, tableRef,
      bankTable,limitTable,logRef
    }
  }
})
</script>
<style scoped lang='scss'>
.box {
  width: calc(100% - 64px);
  background: #fff;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  height: 70px;
  padding: 10px 32px;
  margin-top: 10px;
}

.mytable {
  overflow-y: auto;
  width: calc(100% - 64px);
  background: #fff;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  padding: 10px 32px;
  height: calc(100% - 125px);
}

.size {
  color: #1878FF;
  cursor: pointer;
}
</style>